<template lang="">
  <div>
    <el-table
      :data="biddingListTableData"
      border
      :header-cell-style="{'text-align':'center',background:'#F2F2F2'}"
      :cell-style="{'text-align':'center'}"
      style="width:100%;">
      <el-table-column
        width=170
        prop="goodsNumber"
        label="竞拍编号">
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="标的名称">
      </el-table-column>
      <el-table-column
        width=170
        prop="startTime"
        label="开始时间">
      </el-table-column>
      <el-table-column
        width=170
        prop="endTime"
        label="结束时间">
      </el-table-column>
      <el-table-column
        prop="id"
        label="报名ID">
      </el-table-column>
      <el-table-column
        prop="earnestMoney"
        label="保证金">
      </el-table-column>
      <el-table-column
        prop="transactionStatus"
        label="竞拍状态">
        <template slot-scope="scope">
          <span v-show="scope.row.transactionStatus === 0">未成功</span>
          <span v-show="scope.row.transactionStatus === 1">已成功</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="bidNumber"
        label="出价次数">
      </el-table-column>
      <el-table-column
        prop="startPrice"
        label="起拍价">
      </el-table-column>
      <el-table-column
        prop="maxBid"
        label="我的最后报价">
      </el-table-column>
      <el-table-column
        prop="endPrice"
        label="成交价">
      </el-table-column>
      <el-table-column
      width=240
        label="操作">
        <template slot-scope="scope">
          <el-button v-show="a" @click="handleClick(scope.row)" type="danger" plain size="small" >去竞价</el-button>
          <el-button v-show="b" @click="handleClick(scope.row)" type="danger" plain size="small" >详情</el-button>
          <el-button v-show="b" @click="report(scope.row)" type="danger" plain size="small">报告</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" style="margin-top: 20px;">
    </el-pagination>
    <el-dialog
      title="竞拍报告"
      width="58%"
      :visible.sync="innerVisible"
      append-to-body>
      <div style="width: 100%;">
        <p>
          1.本轮竞拍公告时间:<span style="color: red;">2019/03/27 09:00</span>结束于<span style="color: red;">2019/03/30 9:00</span>
          委托编号:<span style="color:#8ED6FF;">WT201903261245</span></p>
        <p>
          2.本轮竞拍开始时间:<span style="color: red;">2019/04/02 09:00</span>结束于<span style="color: red;">2019/03/30 9:00</span>
          期间拍品在平台浏览量<span style="color: red;">365</span>次,共<span style="color: red;">45</span>个采购企业报名,
          经过平台审核筛选最终入选<span style="color: red;">25</span>位优质企业参加;竞拍编号:
          <span style="color:#8ED6FF;">JP201903261245</span>
        </p>
        <p>
          起拍价<span style="color: red;">21561</span>元,共出价<span style="color: red;">151</span>次,加价幅度
          <span style="color: red;">1000</span>元,成交价<span style="color: red;">31561</span>
        </p>
        <p>
          <span style="color: red;">报告:ID45671 胜出方:江******公司,出价:4次,锁定成交价:31561,</span>
          订单编号:<span style="color:#8ED6FF;">D201904037654</span>
        </p>
        <el-table
          border
          :data="biddingListTableData"
          :header-cell-style="{'text-align':'center',background:'#F2F2F2'}"
          :cell-style="{'text-align':'center'}"
          style="width: 96%;border: 1px solid black;">
          <el-table-column
            prop="date"
            label="服务类型"
            width="200">
          </el-table-column>
          <el-table-column
            prop="name"
            label="代理人"
            width="150">
          </el-table-column>
          <el-table-column
            prop="province"
            label="服务时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="city"
            label="服务内容"
            width="200">
          </el-table-column>
          <el-table-column
            prop="address"
            label="备注"
            width="279">
          </el-table-column>
        </el-table>
        <p>
          本次服务总共为您服务时长<span style="color: red;">48</span>小时、参与服务类型<span style="color: red;">17</span>项,
          参与服务人员数量<span style="color: red;">2</span>人/次
        </p>
      </div>
    </el-dialog>
    </div>
</template>
<script>
export default {
  data () {
    return {
      innerVisible: false, // 点击报告弹窗
      a: false,
      b: true,
      currentPage4: 1, // 分页显示第几页
      pageRequest: { // 分页请求参数
        pageSize: 5, // 每页条数
        pageNum: 1 // 每页数量
      },
      total: 0, // 分页总条数
      biddingListTableData: [{}], // table表格存储数据
      userInfo: {} // 用户信息
    }
  },
  mounted () {
    this.selectBiddingList() // 查询竞拍
  },
  methods: {
    selectBiddingList () { // 查询竞拍
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.$axios.get('myBid/selectMyBidById', { params: { userId: this.userInfo.id, pageSize: this.pageRequest.pageSize, pageNum: this.pageRequest.pageNum } }).then((res) => {
        if (res.data.code === '200') {
          this.biddingListTableData = res.data.obj.content
          this.total = res.data.obj.total
          // debugger
        }
      })
    },
    report () { // 点击报告颜色弹窗和内容
      this.innerVisible = true
    },
    handleClick (row) { // table表格中操作方法
      // console.log(row)
    },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
      this.selectBiddingList()
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
      this.selectBiddingList()
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/.el-dialog__body {
    padding: 0px 20px 50px;
  }
  /deep/.el-dialog__header {
    padding: 10px 20px 10px;
    border-bottom: 1px  solid grey;
  }
  /deep/.el-menu-item.is-active {
    color: #FF6633;
    font-size: 24px;
    background-color: pink;
  }
  .two_my_bidding_content{
    margin-left: 10px;
    width: 99%;
  }
  .two_my_bidding_title{
    line-height: 100px;
    width: 100%;
    height: 100px;
  }
</style>
